<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios-0.18.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/antd.css" />
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="css/message.css" />
	</head>
	<body>
		<div id="app">
			
			<!-- 上 功能 -->
			<div id="" style="display: flex;  flex-wrap: nowrap;width: 100%; height: 40px;">
				<div id="" style="width: 80%;">
					<input type="button" onclick="window.location.href='adminInsert.html'" value="+ 添加管理员" style="background-color:blue;color: white;border-radius: 5px; margin-top: 5px;margin-left: 50px;border:2px solid blue " />
				</div>
				<div id="" style="">
					<p style="margin-top: 10px;">共有数据：{{messageList.length}} 条</p>
				</div>
			</div>
			<br>

			<div id="" style="display: flex; flex-wrap: nowrap;margin-top: 30px;">
				<div id="" style="width: 60%;margin-left: 50px;">
					显示<select name="" class="num" @change="yeshu()" style="border: 1px solid white;">
						<option value="10">10</option>
						<option value="9">9</option>
						<option value="8">8</option>
						<option value="7">7</option>
						<option value="6">6</option>
						<option value="5">5</option>
						<option value="4">4</option>
						<option value="3">3</option>
						<option value="2">2</option>
						<option value="1">1</option>
					</select>条
				</div>
				<div id="" style="text-align: right;">
					从当前数据检索&nbsp;&nbsp;&nbsp;<input type="text" style="height: 25px;width:50%;" v-model="massagekey" />
				</div>
			</div>


			<!-- 中 查询留言 -->
			<table border="" cellspacing="" cellpadding="" width="95%" align="center" style="margin-top: 20px;">

				<header>
					<th><input type="checkbox" name="" id="" value="" /></th>
					<th>ID</th>
					<th>登录名</th>
					<th>手机</th>
					<th>邮箱</th>
					<th>加入时间</th>
					<th>操作</th>
				</header>
				<tr v-for="(item,index) in findEmps" :key="index">
					<td><input type="checkbox" name="" id="" value="" /></td>
					<td>{{item.superid}}</td>
					<td>{{item.supername}}</td>
					<td>{{item.phone}}</td>
					<td>{{item.email}}</td>
					
					<td>
						{{item.date | timeFormat }}
					</td>
					<td>
						<span class="glyphicon glyphicon-pencil" aria-hidden="true" @click="isUpdate(item.superid)"></span>
						&nbsp;
						<span class="glyphicon glyphicon-trash" aria-hidden="true" @click="isDelete(item.superid)"></span>
					</td>
				</tr>
			</table>
			<!-- 下 分页 -->
			<div id="" style="display: flex;">
				<span style="margin-left: 50px;margin-top: 20px;">
					<span v-if="num==0">没有数据</span>
					<span v-else>显示 {{1+(pageSize*currentPage)}} 到 {{pageSize*(currentPage)+findEmps.length}}</span>
					， 共 {{num}} 条
				</span>
				<nav aria-label="Page navigation" style="position: absolute;right: 0px;margin-right: 50px;">
					<ul class="pagination">
						<li @click="prePage()">
							<a href="#" aria-label="Previous">
								<span aria-hidden="true">上一页</span>
							</a>
						</li>
					</ul>

					<ul class="pagination" v-for="index of pageNum" :key="index">
						<li @click="Page(index)"><a href="#">{{index}}</a></li>
					</ul>

					<ul class="pagination">
						<li @click="nextPage()">
							<a href="#" aria-label="Next">
								<span aria-hidden="true">下一页</span>
							</a>
						</li>
					</ul>
				</nav>

			</div>


		</div>
	</body>
</html>
<script>


</script>
<script type="text/javascript">
	var vm = new Vue({
		el: "#app",
		data: {
			//文章列表
			messageList: [],
			num: 0,
			// 所有页面的数据
			totalPage: [],
			// 每页显示数量
			pageSize: 10,
			// 共几页
			pageNum: 1,
			// 当前显示的数据
			dataShow: "",
			// 默认当前显示第一页
			currentPage: 0,

			massagekey: "",

		},
		beforeMount: function() {
			var _this = this;
			axios({
				method: "POST",
				url: "http://localhost:8080/Blogs_demo/admin/queryAll",
				data: {}
			}).then(res => { //成功
				console.log(res.data[0]);
				_this.messageList = res.data;

				// 根据后台数据的条数和每页显示数量算出一共几页,得0时设为1 ;
				_this.pageNum = Math.ceil(_this.messageList.length / _this.pageSize) || 1;


				for (let i = 0; i < _this.pageNum; i++) {
					// 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
					// 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
					_this.totalPage[i] = _this.messageList.slice(_this.pageSize * i, _this.pageSize * (i + 1))
				}
				// 获取到数据后显示第一页内容
				_this.dataShow = _this.totalPage[_this.currentPage];


			}).catch(err => { //失败
				alert("服务异常！！！")
			})

		},
		methods: {
			//改变显示条数
			yeshu: function() {
				this.pageSize = $(".num").val();
			},

			//点击页数
			Page: function(index) {
				this.dataShow = this.totalPage[index - 1];
				this.currentPage = index - 1;
			},
			// 上一页和下一页
			// 下一页
			nextPage: function() {
				if (this.currentPage === this.pageNum - 1) return;
				this.dataShow = this.totalPage[++this.currentPage];
			},
			// 上一页
			prePage: function() {
				if (this.currentPage === 0) return;
				this.dataShow = this.totalPage[--this.currentPage];
			},

			//修改
			isUpdate: function(gid) {
				window.location.href = "./adminUpdate.html?gid=" + gid;
			},


			//删除
			isDelete: function(gid) {
				var _this = this;
				var isOK = confirm("确认删除吗？");
				if (isOK) {

					axios({
						method: "POST",
						url: "http://localhost:8080/Blogs_demo/admin/adminDelete/" + gid,
						data: {}
					}).then(res => { //成功



						axios({
							method: "POST",
							url: "http://localhost:8080/Blogs_demo/admin/queryAll",
							data: {}
						}).then(res1 => { //成功
							console.log(res.data[0]);
							_this.messageList = res1.data;

							// 根据后台数据的条数和每页显示数量算出一共几页,得0时设为1 ;
							_this.pageNum = Math.ceil(_this.messageList.length / _this.pageSize) || 1;


							for (let i = 0; i < _this.pageNum; i++) {
								// 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
								// 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
								_this.totalPage[i] = _this.messageList.slice(_this.pageSize * i, _this.pageSize * (i + 1))
							}
							// 获取到数据后显示第一页内容
							_this.dataShow = _this.totalPage[_this.currentPage];


						}).catch(err1 => { //失败
							alert("服务异常！！！")
						})




					}).catch(err => { //失败
						alert("服务异常！！！")
					})

				}



			}
		},
		computed: {
			findEmps: function() {
				var _this = this;
				_this.num = 0;

				mess = []

				_this.messageList.filter(function(val) {

					if (val.email.indexOf(_this.massagekey) != -1) {
						mess.push(val)
						_this.num++
					}

				})

				// 根据后台数据的条数和每页显示数量算出一共几页,得0时设为1 ;
				_this.pageNum = Math.ceil(mess.length / _this.pageSize) || 1;

				for (let i = 0; i < _this.pageNum; i++) {
					// 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
					// 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
					_this.totalPage[i] = mess.slice(_this.pageSize * i, _this.pageSize * (i + 1))
				}
				// 获取到数据后显示第一页内容
				return _this.totalPage[_this.currentPage];

			}





		},
		filters: {
			timeFormat: function(time) {
				var date = new Date(time);

				var strDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + "   " + date.getHours() +
					":" + date.getMinutes() + ":" + date.getSeconds();

				return strDate;

			},
			zuihou: function(shuju) {

				return this.num;

			}
		},


	})
</script>
